// pages/song/song.js
import request from '../../../utils/request'
import moment from 'moment'
import PubSub from 'pubsub-js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 播放或者暂停的标识
    songId: '', //保存当前播放歌曲的id
    songInfo: {}, //保存歌曲的详情信息
    url: '',//保存歌曲的播放地址
    currentTime:'00:00',//
    endTime:'00:00',
    width:'',
  },

  // 控制按钮的播放或者暂停状态
  handlerPlay() {
    const isPlay = !this.data.isPlay
    // 重新更新
    this.setData({
      isPlay
    })
    this.playOrPause()//控制音乐的播放或暂停
  },
  //定义一个函数专门用来控制音乐的播放或暂停
  playOrPause(){
    const isPlay = this.data.isPlay
    if (isPlay) {
      this.player.play()
    } else {
      this.player.pause()
    }
  },
  // 根据保存的歌曲id发请求获取歌曲详情信息
  async getSongInfo() {
    const result = await request('/song/detail', { ids: this.data.songId })
    //console.log(result);
    this.setData({
      // result.songs[0]
      songInfo: {
        id: result.songs[0].id,
        songName: result.songs[0].name,
        songImg: result.songs[0].al.picUrl,
        singerName:result.songs[0].ar[0].name
      }
    })

    // 动态设置navigationBar当中的title
    wx.setNavigationBarTitle({
      title: result.songs[0].name,
    })
  },

  // 请求获取歌曲的播放地址
  async getSongUrl() {
    const result = await request('/song/url', { id: this.data.songId })
    // console.log(result);
    this.setData({
      url: result.data[0].url
    })
  },
  // 点击上一首或者下一首切换歌曲
  changePrevOrNext(event){
    // 获取用户点击的是哪个按钮
    let type = event.currentTarget.id
    // console.log(type);
    // 我们需要把这个type值传递到推荐列表页面
    // 因为我们的歌曲列表是在推荐列表页面
    // PubSub  消息的订阅和发布 对应两个函数
    // PubSub.subscribe  //主要是用来订阅消息，用来接收数据的
    // PubSub.publish //主要用来发布消息，用来发送数据的
    PubSub.publish('type',type)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    // 可以获取到传递过来的路由参数,歌曲的id
    // 通过id请求可以获取歌曲的详情信息
    this.setData({
      songId: options.songId,
      isPlay: true
    })

    // 保存完id，我们就可以获取歌曲的详情展示页面
    await this.getSongInfo()
    // 自动播放歌曲
    // 1、自动播放歌曲需要请求获取歌曲的播放地址
    await this.getSongUrl()
    // 2、歌曲播放需要一个播放器，创建歌曲播放器
    this.player = wx.getBackgroundAudioManager()
    // 3、播放歌曲
    this.player.src = this.data.url
    // 这个坑一定要配置
    this.player.title = this.data.songInfo.songName
    //绑定音频播放事件
    this.player.onPlay(()=>{
      this.setData({
        isPlay:true
      })
    })
    //绑定音频暂停事件
    this.player.onPause(()=>{
      this.setData({
        isPlay:false
      })
    })
    // 监听音乐播放完成
    this.player.onEnded(() => {
      PubSub.publish('type','next') //自动播放下一首
    })
    //订阅消息
    PubSub.subscribe('songId',async (msg,songId) => {
      this.setData({
        songId,
        isPlay:true
      })
      // 保存完id，我们就可以获取歌曲的详情展示页面
      await this.getSongInfo()
      // 自动播放歌曲
      // 1、自动播放歌曲需要请求获取歌曲的播放地址
      await this.getSongUrl()
      // 2、歌曲播放需要一个播放器，创建歌曲播放器
      this.player = wx.getBackgroundAudioManager()
      // 3、播放歌曲
      this.player.src = this.data.url
      // 这个坑一定要配置
      this.player.title = this.data.songInfo.songName
    })
    // 监听音频的时间变化
    this.player.onTimeUpdate(()=>{
      let currentTime = moment(this.player.currentTime * 1000).format('mm:ss')
      let endTime = moment(this.player.duration * 1000).format('mm:ss')
      let width = this.player.currentTime * 450 / this.player.duration + 'rpx'
      this.setData({
        currentTime,
        endTime,
        width
      })
    })
  },



  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})